<template>
  <div class="sub-nav">
    <ul>
      <li v-for="item in icons" :key="item.id">
        <a href="#">
          <img :src="item.category_img" :alt="item.category_name" />
          <p>{{ item.category_name }}</p>
        </a>
      </li>
    </ul>
  </div>
</template>

<script type="text/ecmascript-6">
import { getIcon } from "@/api/api"
export default {
  name: "Icons",
  data() {
    return {
      icons: [
        // {icon: "&#xe601;", text: "白酒"},
        // {icon: "&#xe610;", text: "啤酒"},
        // {icon: "&#xe62d;", text: "葡萄酒"},
        // {icon: "&#xe604;", text: "清酒洋酒"},
        // {icon: "&#xe60d;", text: "保健酒"},
        // {icon: "&#xe606;", text: "预调酒"},
        // {icon: "&#xe61c;", text: "下酒小菜"},
        // {icon: "&#xe680;", text: "饮料"},
        // {icon: "&#xe64b;", text: "乳制品"},
        // {icon: "&#xe608;", text: "休闲零食"}
      ]
    };
  },
  mounted (){
    getIcon()
      .then(res=>{
        this.icons = res.data
      }).catch(err=>{
        console.log(err)
    })
  },
  components: {},
  computed: {}
};
</script>

<style scoped lang="stylus">
.sub-nav
  background-color #ffffff
  padding .4rem 0 .13333rem 0

.sub-nav ul
  overflow hidden

  li
    width 20%
    float left
    position relative
    display block
    text-align center
    margin-bottom 0.46667rem
    img
      width 50%
    p
      font-size .32rem
      margin-top .06667rem
      color #666666
      ellipsis()
</style>
